<template>
	<view>
		<wd-message-box></wd-message-box>
		<wd-toast></wd-toast>
我的页面
    {{userInfo}}1111
    <wd-button type="primary" @click="doLogout">退出登录</wd-button>
  </view>
</template>

<script lang="ts" setup>
	import { useMessage, useNotify } from 'wot-design-uni'
	import { useToast } from 'wot-design-uni'
	const { showNotify } = useNotify()
	const toast = useToast()
	const message = useMessage()
	const { userInfo } = storeToRefs(useAuthStore()) // 解构pinia的store
	const router = useRouter()
	const info = ref<any>({
		balance: 0
	})

	/**
	 * 登出
	 */
	function doLogout() {
		message
			.confirm({ title: '提示', msg: '确认退出当前登录账号吗？' })
			.then(() => {
				// 点击的确认按钮
				useAuthStore().logout()
				router.replaceAll({ name: 'login' })
			})
			.catch((error) => {
				console.log(error)
			})
	}

  onShow(() => {
    console.log(userInfo.value,'----1')
    if (!userInfo.value) {
      toast.error('登录失效，请重新登录')
      uni.reLaunch({ url: '/pages/login/Login' })
    }
  })
</script>

<style lang="scss" scoped>
	::v-deep .is-primary {
		background: #000 !important;
	}

	.user-info {
		align-items: end;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;

		.header-user-avatar {
			flex: 0 0 auto;
			border-radius: 50%;
			width: 138rpx;
			height: 138rpx;
			overflow: hidden;
			border: 1px solid #fff;
			box-sizing: border-box;
		}

		.name-box {
			height: 138rpx;
			flex-direction: column;
			padding: 10rpx 0;
			align-items: start;
		}
	}

	.pirce {
		margin-top: 20rpx;

		.withdrawal {
			margin-top: 20rpx;
			justify-content: flex-end;

			.btn {
				padding: 10rpx 30rpx;
				border-radius: 20rpx;
				background-color: red;
				color: #fff;
			}
		}
	}

	.personnel-box {
		margin-top: 20rpx;

		.personnel {
			width: 40%;
			padding: 20rpx 0;
			text-align: center;
			background-color: #030303;
			color: #fff;
			font-size: 28rpx;
			border-radius: 20rpx;
		}
	}

	.item {
		padding: 32rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.notbor {
		border: none;
	}

	.mine {
		box-sizing: border-box;
		padding: 32rpx 32rpx 200rpx 32rpx;
	}
</style>
<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>